<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body >
<div class="container-fluid">
	<h3>表格</h3>
    <div class="row">
    	<div class="col-md-12 mylist ">
            <table class="table table-bordered  table-striped text-right" border="0" cellpadding="0" cellspacing="0">
                <thead >
                	
                    <tr>
                        <th width="50">序号</th>
                        <th width="50"><input type="checkbox" /></th>
                        <th width="300">产品名称</th>
                        <th width="200">型号</th>
                        <th width="200">规格</th>
                        <th width="200">单位</th>
                        <th width="200">数量</th>
                        <th width="200">采购类别</th>	
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td width="50">1</td>
                        <td width="50"><input type="checkbox" /></td>
                        <td width="300">3</td>
                        <td width="200"></td>
                        <td width="200"></td>
                        <td width="200"></td>
                        <td width="200">
                            <input type="text" class="form-control" placeholder="1">
                        </td>
                        <td width="200">
                            <select class="form-control">
                              <option>折扣</option>
                              <option>正常</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="50">2</td>
                        <td width="50"><input type="checkbox" /></td>
                        <td width="300"></td>
                        <td width="200"></td>
                        <td width="200"></td>
                        <td width="200"></td>
                        <td width="200">
                            <input type="text" class="form-control" placeholder="1">
                        </td>
                        <td width="200">
                            <select class="form-control">
                              <option>折扣</option>
                              <option>正常</option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
                &lt;table class="table table-bordered  table-striped " border="0" cellpadding="0" cellspacing="0"&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th width="50"&gt;序号&lt;/th&gt;
                            &lt;th width="50"&gt;&lt;input type="checkbox" /&gt;&lt;/th&gt;
                            &lt;th width="300"&gt;产品名称&lt;/th&gt;
                            &lt;th width="200"&gt;型号&lt;/th&gt;
                            &lt;th width="200"&gt;规格&lt;/th&gt;
                            &lt;th width="200"&gt;单位&lt;/th&gt;
                            &lt;th width="200"&gt;数量&lt;/th&gt;
                            &lt;th width="200"&gt;采购类别&lt;/th&gt;	
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                        &lt;tr&gt;
                            &lt;td width="50"&gt;1&lt;/td&gt;
                            &lt;td width="50"&gt;&lt;input type="checkbox" /&gt;&lt;/td&gt;
                            &lt;td width="300"&gt;&lt;/td&gt;
                            &lt;td width="200"&gt;&lt;/td&gt
                            &lt;td width="200"&gt;&lt;/td&gt;
                            &lt;td width="200"&gt;&lt;/td&gt;
                            &lt;td width="200"&gt;
                                &lt;input type="text" class="form-control" placeholder="1"&gt;
                            &lt;/td&gt;
                            &lt;td width="200"&gt;
                                &lt;select class="form-control"&gt;
                                  &lt;option&gt;折扣&lt;/option&gt;
                                  &lt;option&gt;正常&lt;/option&gt;
                                &lt;/select&gt;
                            &lt;/td&gt;
                        &lt;/tr&gt;
                         &lt;tr&gt;
                            &lt;td width="50"&gt;2&lt;/td&gt;
                            &lt;td width="50"&gt;&lt;input type="checkbox" /&gt;&lt;/td&gt;
                            &lt;td width="300"&gt;&lt;/td&gt;
                            &lt;td width="200"&gt;&lt;/td&gt;
                            &lt;td width="200"&gt;&lt;/td&gt;
                            &lt;td width="200"&gt;&lt;/td&gt;
                            &lt;td width="200"&gt;
                                &lt;input type="text" class="form-control" placeholder="1"&gt;
                            &lt;/td&gt;
                            &lt;td width="200"&gt;
                                &lt;select class="form-control"&gt;
                                  &lt;option&gt;折扣&lt;/option&gt;
                                  &lt;option&gt;正常&lt;/option&gt;
                                &lt;/select&gt;
                             &lt;/td&gt;
                         &lt;/tr&gt;
                     &lt;/tbody&gt;
                 &lt;/table&gt;
            </code>
        </pre>
    </div>
  	<hr />
    <h3>特殊表格--点击操作中的图标具有展开功能</h3>
    <div class="col-md-12 mylist">
        <table class="table table-bordered  table-striped" cellpadding="0" cellspacing="0" border="0">
            <thead>
                <tr>
                    <th width="150">操作</th>
                    <th width="100">订单编号</th>
                    <th width="150">产品名称</th>
                    <th width="100">型号</th>
                    <th width="100">规格</th>
                    <th width="100">单位</th>
                    <th width="150">通知到货数量</th>
                    <th width="150">已入库数量</th>
                    <th width="150">入库数量</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <a data-toggle="collapse" data-parent="#product" href="#lotNumOne" aria-expanded="true" aria-controls="lotNumOne" class="collapsed"><span class="glyphicon glyphicon-fullscreen btn-lg"></span></a>
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        <input class="form-control" placeholder="默认=通知到货数量">
                    </td>
                </tr>
                <tr>
                    <td colspan="9" class="padding0">
                        <div id="lotNumOne" class="panel-collapse collapse" style="height: 0px;">
                            <div class="mylist padding8">
                                <table class="table table-bordered  table-striped" cellpadding="0" cellspacing="0" border="0">
                                    <thead>
                                        <tr>
                                            <th width="150">操作</th>
                                            <th width="100">批号</th>
                                            <th width="100">S/N</th>
                                            <th width="100">有效期</th>
                                            <th width="100">生产日期</th>
                                            <th width="100">数量</th>
                                            <th width="100">包装情况</th>
                                            <th width="100">库区</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                
                                                <a href="#"><span class="glyphicon glyphicon-trash btn-lg"></span></a>
        
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <select class="form-control">
                                                  <option>完好</option>
                                                  <option>破损可销售</option>
                                                  <option>破损不可销售</option>
                                                </select>
                                            </td>
                                            <td>
                                                <select class="form-control">
                                                  <option>合格品</option>
                                                  <option>不合格品</option>
                                                  <option>样品</option>
                                                  <option>过渡品</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                
                                                <a href="#"><span class="glyphicon glyphicon-trash btn-lg"></span></a>
        
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <input class="form-control" placeholder="">
                                            </td>
                                            <td>
                                                <select class="form-control">
                                                  <option>完好</option>
                                                  <option>破损可销售</option>
                                                  <option>破损不可销售</option>
                                                </select>
                                            </td>
                                            <td>
                                                <select class="form-control">
                                                  <option>合格品</option>
                                                  <option>不合格品</option>
                                                  <option>样品</option>
                                                  <option>过渡品</option>
                                                </select>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
                &lt;div class="col-md-12 mylist"&gt;
                    &lt;table class="table table-bordered  table-striped" cellpadding="0" cellspacing="0" border="0"&gt;
                        &lt;!--与普通表格一样设置表头--&gt;>
                        &lt;thead&gt;
                            &lt;tr&gt;
                                &lt;th width="150"&gt;操作&lt;/th&gt;
                                &lt;th width="100"&gt;订单编号&lt;/th&gt;
                                &lt;th width="150"&gt;产品名称&lt;/th&gt;
                                &lt;th width="100"&gt;型号&lt;/th&gt;
                                &lt;th width="100"&gt;规格&lt;/th&gt;
                                &lt;th width="100"&gt;单位&lt;/th&gt;
                                &lt;th width="150"&gt;通知到货数量&lt;/th&gt;
                                &lt;th width="150"&gt;已入库数量&lt;/th&gt;
                                &lt;th width="150"&gt;入库数量&lt;/th&gt;
                            &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;!--与普通表格一样设置表格内容 --&gt;
                        &lt;tbody&gt;
                            &lt;!--每两个tr为一组--&gt;
                            &lt;!--第一组开始--&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                     &lt;!--红色标标记部分表示要展开的内容标识，与下面代码红色标记部分对应--&gt;
                                    &lt;a data-toggle="collapse" data-parent="#product" <font color="red">href="#lotNumOne"</font> aria-expanded="true" <font color="red">aria-controls="lotNumOne"</font> class="collapsed"&gt;&lt;span class="glyphicon glyphicon-fullscreen btn-lg"&gt;&lt;/span&gt;&lt;/a&gt;
                                &lt;/td&gt;
                                &lt;td&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input class="form-control" placeholder="默认=通知到货数量"&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;!--展开内容区域--&gt;
                                &lt;td colspan="9" class="padding0"&gt;
                                   &lt;!--黄色背景标记DIV是显示隐藏的关键，显示隐藏的内容必须包含在DIV结构里--&gt;
                                   &lt;!--红色标记ID是唯一值，与外围嵌套表格中操作按钮红色标记部分一一对应--&gt;
                                   <span style="background-color:#FF0">&lt;div <font color="red">id="lotNumOne"</font> class="panel-collapse collapse" style="height: 0px;"&gt;</span>
                                        &lt;!--以下内容根据实际情况而定--&gt;
                                        <span style="background-color:#0FF">&lt;div class="mylist padding8"&gt;
                                            &lt;table class="table table-bordered  table-striped" cellpadding="0" cellspacing="0" border="0"&gt;
                                                &lt;thead&gt;
                                                    &lt;tr&gt;
                                                        &lt;th width="150"&gt;操作&lt;/th&gt;
                                                        &lt;th width="100"&gt;批号&lt;/th&gt;
                                                        &lt;th width="100"&gt;S/N&lt;/th&gt;
                                                        &lt;th width="100"&gt;有效期&lt;/th&gt;
                                                        &lt;th width="100"&gt;生产日期&lt;/th&gt;
                                                        &lt;th width="100"&gt;数量&lt;/th&gt;
                                                        &lt;th width="100"&gt;包装情况&lt;/th&gt;
                                                        &lt;th width="100"&gt;库区&lt;/th&gt;
                                                    &lt;/tr&gt;
                                                &lt;/thead&gt;
                                                &lt;tbody&gt;
                                                    &lt;tr&gt;
                                                        &lt;td&gt;
                                                            &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-trash btn-lg"&gt;&lt;/span&gt;&lt;/a&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;select class="form-control"&gt;
                                                              &lt;option&gt;完好&lt;/option&gt;
                                                              &lt;option&gt;破损可销售&lt;/option&gt;
                                                              &lt;option&gt;破损不可销售&lt;/option&gt;
                                                            &lt;/select&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;select class="form-control"&gt;
                                                              &lt;option&gt;合格品&lt;/option&gt;
                                                              &lt;option&gt;不合格品&lt;/option&gt;
                                                              &lt;option&gt;样品&lt;/option&gt;
                                                              &lt;option&gt;过渡品&lt;/option&gt;
                                                            &lt;/select&gt;
                                                        &lt;/td&gt;
                                                    &lt;/tr&gt;
                                                    &lt;tr&gt;
                                                        &lt;td&gt;
                                                            &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-trash btn-lg"&gt;&lt;/span&gt;&lt;/a&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;input class="form-control" placeholder=""&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;select class="form-control"&gt;
                                                              &lt;option&gt;完好&lt;/option&gt;
                                                              &lt;option&gt;破损可销售&lt;/option&gt;
                                                              &lt;option&gt;破损不可销售&lt;/option&gt;
                                                            &lt;/select&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;select class="form-control"&gt;
                                                              &lt;option&gt;合格品&lt;/option&gt;
                                                              &lt;option&gt;不合格品&lt;/option&gt;
                                                              &lt;option&gt;样品&lt;/option&gt;
                                                              &lt;option&gt;过渡品&lt;/option&gt;
                                                            &lt;/select&gt;
                                                        &lt;/td&gt;
                                                    &lt;/tr&gt;
                                                &lt;/tbody&gt;
                                            &lt;/table&gt;
                                        &lt;/div&gt;</span>
                                    <span style="background-color:#FF0">&lt;/div&gt;</span>
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;!--第一组结束-&gt;
                            &lt;!--以上只是单组出现，如果是多组出现的话，下面每个组都是重复上面两个Tr 的代码结构，关键部分都有特殊颜色标记--&gt;
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                &lt;/div&gt;
            </code>
        </pre>
    </div>
</div>
<br />
<br />
<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
</body>
</html>
